<template>
  <div class="main-container">
    <TableBody>
      <template #header>
        <TableHeader ref="tableHeaderRef" :show-filter="false">
          <template #search-content>
            <a-form ref="serchForm" :model="form" :style="{ width: '100%' }">
              <a-row :gutter="24">
                <a-col :span="4">
                  <a-form-item field="addCard" hide-label>
                    <a-input-group>
                      <a-select
                        style="width: 50%"
                        v-model="type"
                        @change="typeFn"
                        placeholder="first"
                      >
                        <a-option v-for="item in typeLists" :key="item.name" :value="item.value">{{
                          item.name
                        }}</a-option>
                      </a-select>
                      <a-input style="width: 50%" v-model="typeText" placeholder="请输入搜索条件">
                        <!-- <template #suffix>
                          <icon-plus @click="open" style="cursor: pointer" /> </template
                      > -->
                      </a-input>
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <!-- <a-col :span="4">
                  <a-form-item field="state" hide-label>
                    <a-select v-model="form.close" placeholder="请选择方案状态" allow-clear>
                      <a-option value="0">正常</a-option>
                      <a-option value="1">关闭</a-option>
                    </a-select>
                  </a-form-item>
                </a-col> -->
                <a-col :span="4">
                  <a-form-item field="addTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.addTime"
                      show-time
                      :disabledDate="changeTraceEnd"
                      placeholder="请选择开始创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-date-picker
                      style="width: 100%"
                      v-model="form.endTime"
                      show-time
                      :disabledDate="changeTraceStart"
                      placeholder="请选择开始创建时间"
                      :shortcuts="[
                        {
                          label: '今日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            ))
                          ),
                        },
                        {
                          label: '昨日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs('23:59:59', 'HH:mm:ss')
                              .subtract(1, 'day')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '七日',
                          value: () => (
                            (form.addTime = $dayjs('00:00:00', 'HH:mm:ss')
                              .subtract(6, 'day')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '本月',
                          value: () => (
                            (form.addTime = $dayjs('01 00:00:00', 'DD HH:mm:ss').format(
                              'YYYY-MM-DD HH:mm:ss'
                            )),
                            (form.endTime = $dayjs().format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                        {
                          label: '上月',
                          value: () => (
                            (form.addTime = $dayjs(`01 00:00:00`, 'DD HH:mm:ss')
                              .subtract(1, 'month')
                              .format('YYYY-MM-DD HH:mm:ss')),
                            (form.endTime = $dayjs()
                              .subtract(1, 'month')
                              .endOf('month')
                              .format('YYYY-MM-DD HH:mm:ss'))
                          ),
                        },
                      ]"
                      :time-picker-props="{ defaultValue: '12:00:00' }"
                      format="YYYY-MM-DD HH:mm:ss"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="endTime" hide-label>
                    <a-input-group style="width: 100%">
                      <a-input-number
                        hide-button
                        v-model="form.addAmount"
                        placeholder="请输入开始金额"
                      />
                      <a-input-number
                        hide-button
                        v-model="form.endAmount"
                        placeholder="请输入结束金额"
                      />
                    </a-input-group>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-form-item field="btns" hide-label>
                    <a-space :size="15">
                      <a-button
                        type="primary"
                        v-permission="speedList"
                        html-type="submit"
                        @click="doRefresh()"
                        ><template #icon>
                          <icon-search />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>搜索</template></a-button
                      >
                      <a-button v-permission="speedList" @click="resetSeach"
                        ><template #icon>
                          <icon-sync theme="outline" size="14" />
                        </template>
                        <!-- Use the default slot to avoid extra spaces -->
                        <template #default>重置</template></a-button
                      >
                    </a-space>
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </template>
        </TableHeader>
      </template>
      <template #table-config>
        <a-space :size="15">
          <a-button type="primary" v-permission="speedAdd" @click="showAdd">
            <!-- Use the default slot to avoid extra spaces -->
            <template #default>新建</template>
          </a-button>
        </a-space>
        <a-space :size="15">
          <TableConfig
            @update-border="onUpdateBorder"
            @update-striped="onUpdateStriped"
            @refresh="doRefresh"
          />
        </a-space>
      </template>
      <template #default>
        <a-table
          :loading="tableLoading"
          :bordered="{ wrapper: true, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="table.dataList"
          :pagination="false"
          :row-key="rowKey"
          :scroll="{ x: 1500 }"
          :row-class-name="rowClassNameFun"
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumns.list"
              :key="item.key"
              align="left"
              :title="(item.title as string)"
              :width="item.width"
              :data-index="(item.key as string)"
              :fixed="item.fixed"
              :ellipsis="true"
              :tooltip="true"
            >
              <template v-if="item.key === 'vipTime'" #cell="{ record }">
                {{ record.vipTime }}{{ record.vipTimeType == 0 ? '天' : '月' }}
              </template>
              <template v-if="item.key === 'amount'" #cell="{ record }">
                {{ record.amount }}元
              </template>
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    v-permission="speedUpdate"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="updatUserPop(record)"
                    >编辑</a-button
                  >
                  <a-button
                    v-permission="speedAdd"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="onCopy(record)"
                    >复制</a-button
                  >
                  <a-button
                    v-permission="'/app/speed/vip/series/apply/list'"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="seriesList(record)"
                    >查看</a-button
                  >
                  <a-button
                    v-permission="speedDele"
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    @click="onDeleteItem(record)"
                    >删除</a-button
                  >
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </template>
      <!-- <template #footer>
        <TableFooter ref="tableFooterRef" :pagination="pagination" />
      </template> -->
    </TableBody>

    <a-modal
      v-model:visible="visible"
      @before-close="handleCancel"
      :title="title"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <a-form ref="userForm" :auto-label-width="true" :model="subForm">
        <a-form-item
          label="方案名称"
          field="planName"
          :rules="[
            { required: true, message: '方案名称不能为空' },
            { minLength: 1, maxLength: 50, message: '方案名称必须小于50个字符' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.planName" placeholder="请输入方案名称" allow-clear />
        </a-form-item>
        <a-form-item
          label="会员名称"
          field="vipName"
          :rules="[
            { required: true, message: '会员名称不能为空' },
            { minLength: 1, maxLength: 50, message: '会员名称必须小于50个字符' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.vipName" placeholder="请输入会员名称" allow-clear />
        </a-form-item>
        <a-form-item label="会员图片" field="img">
          <a-upload
            action="/app/file/upload"
            :show-file-list="false"
            @success="onClientBcg"
            :image-preview="true"
          >
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="subForm.img">
                <img :src="subForm.img" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>

        <a-form-item
          label="会员金额"
          field="amount"
          :rules="[{ required: true, message: '会员金额不能为空' }]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number
            v-model.trim="subForm.amount"
            :min="1"
            placeholder="请输入会员金额"
            allow-clear
          />
        </a-form-item>
        <a-form-item
          label="会员时间"
          field="vipTime"
          :rules="[{ required: true, message: '会员时间不能为空' }]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input-number
            v-model.trim="subForm.vipTime"
            hide-button
            :min="1"
            placeholder="请输入会员时间"
            allow-clear
          >
            <template #append>
              <a-radio-group v-model="subForm.vipTimeType">
                <a-radio :value="0">
                  <template #radio="{ checked }">
                    <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                      <div className="custom-radio-card-mask">
                        <div className="custom-radio-card-mask-dot"></div> </div
                      ><div className="custom-radio-card-title">天</div>
                    </div>
                  </template>
                </a-radio>
                <a-radio :value="1">
                  <template #radio="{ checked }">
                    <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                      <div className="custom-radio-card-mask">
                        <div className="custom-radio-card-mask-dot"></div> </div
                      ><div className="custom-radio-card-title">月</div>
                    </div>
                  </template>
                </a-radio>
              </a-radio-group>
            </template>
          </a-input-number>
        </a-form-item>
        <a-form-item
          label="会员内容"
          field="vipContent"
          :rules="[
            { required: true, message: '会员内容不能为空' },
            { minLength: 1, maxLength: 50, message: '会员内容必须小于50个字符' },
          ]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subForm.vipContent" placeholder="请输入会员内容" allow-clear />
        </a-form-item>
        <a-form-item
          label="会员介绍"
          field="vipIntroduce"
          :rules="[{ required: true, message: '会员介绍不能为空' }]"
          asterisk-position="end"
          :validate-trigger="['change', 'input']"
        >
          <RichTextEditor v-if="visible" v-model="subForm.vipIntroduce" ref="richTextEditor" />
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="handleCancel">取消</a-button>
          <a-button type="primary" @click="handleBeforeOk">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="addtagvisibles"
      title="应用系列"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <Table :tablist="series" />
      <template #footer>
        <a-space />
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import useCommonStore from '@/store/modules/common'
  import * as http from '@/api/http'
  import Table from '@/views/polling/compoents/table.vue'
  import { speedList, speedAdd, speedUpdate, speedDele } from '@/api/url'
  import { useRowKey, useTable, usePagination } from '@/hooks/table'
  import { Form, Message, Modal } from '@arco-design/web-vue'
  import { onMounted, reactive, ref } from 'vue'
  const useCommon = useCommonStore()
  // const pagination = usePagination(doRefresh)
  const onClientBcg = (fileItem: any) => {
    subForm.value.img = fileItem.response.data.path
  }
  const table = useTable()
  const rowKey = useRowKey('id')
  const visible = ref(false)
  const btnLoading = ref(false)
  const addtagvisibles = ref(false)
  const userForm = ref<typeof Form>()
  const dataListUser: any = ref([])
  const form = reactive({
    planName: '',
    vipName: '',
    addTime: '',
    endTime: '',
    addAmount: '', // 开始金额
    endAmount: '', // 结束金额
  })
  const title = ref('')
  const series = ref([])
  const subForm: any = ref({
    planName: '', // 方案名称
    vipName: '', //会员名称
    amount: '', //会员售价
    vipTime: '', //会员时间
    vipTimeType: 0, //会员时间类型 0天 1月
    vipContent: '', //会员内容
    vipIntroduce: '',
    img: '',
  })
  const typeLists = ref([
    {
      name: '方案名称',
      value: 'planName',
    },
    {
      name: '会员名称',
      value: 'vipName',
    },
  ])
  const type: any = ref('planName')
  const typeText: any = ref('')
  const tableColumns: any = reactive({
    list: [
      {
        title: '方案ID',
        key: 'id',
        dataIndex: 'id',
        checked: true,
        width: 100,
      },
      {
        title: '方案名称',
        key: 'planName',
        dataIndex: 'planName',
        checked: true,
        width: 200,
      },
      {
        title: '会员名称',
        key: 'vipName',
        dataIndex: 'vipName',
        checked: true,
        width: 200,
      },
      {
        title: '会员时间',
        key: 'vipTime',
        dataIndex: 'vipTime',
        checked: true,
        width: 190,
      },
      {
        title: '会员金额',
        key: 'amount',
        dataIndex: 'amount',
        checked: true,
        width: 180,
      },
      // {
      //   title: '应用系列',
      //   key: 'series',
      //   dataIndex: 'series',
      //   checked: true,
      //   width: 150,
      // },
      {
        title: '会员内容',
        key: 'vipContent',
        dataIndex: 'vipContent',
        checked: true,
        width: 150,
      },
      {
        title: '创建时间',
        key: 'addTime',
        dataIndex: 'addTime',
        checked: true,
        width: 190,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 180,
        align: 'center',
        checked: true,
      },
    ],
  })
  const tableLoading = ref(false)
  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })
  const couponList: any = ref([])

  function showAdd() {
    title.value = '新建方案'
    subForm.value = {
      planName: '', // 方案名称
      vipName: '', //会员名称
      amount: '', //会员售价
      vipTime: '', //会员时间
      vipTimeType: 0, //会员时间类型 0天 1月
      vipContent: '', //会员内容
      img: '',
    }
    visible.value = true
  }

  function handleCancel() {
    userForm.value?.resetFields()
    visible.value = false
  }

  const serchForm = ref()
  const resetSeach = () => {
    typeText.value = ''
    serchForm.value.resetFields()
    doRefresh(1)
  }
  function typeFn() {
    form.planName = ''
    form.vipName = ''
  }
  function updatUserPop(item: any) {
    title.value = '编辑方案'
    subForm.value = JSON.parse(JSON.stringify(item))
    visible.value = true
  }

  function seriesList(val: any) {
    http
      .get({
        url: '/app/speed/vip/series/apply/list',
        data: () => {
          return {
            speedVipId: val.id,
          }
        },
      })
      .then((res) => {
        if (res.code == 0) {
          // Message.success(res.msg)
          series.value = res.data
          addtagvisibles.value = true
        } else {
          Message.error(res.msg)
        }
      })
      .catch(console.log)
  }
  function onDeleteItem(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此方案吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        http
          .get({
            url: speedDele,
            data: () => {
              return {
                id: item.id,
              }
            },
          })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function onCopy(item: any) {
    Modal.warning({
      title: '操作确认',
      content: '确定要复制方案吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '确认',
      onOk: () => {
        http
          .post({
            url: speedAdd,
            data: () => {
              return {
                ...item,
              }
            },
          })
          .then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success('复制成功')
              visible.value = false
              userForm.value?.resetFields()
              doRefresh()
            } else {
              Message.error(res.msg)
            }
          })
      },
    })
  }
  /**
   * 判断editor富文本域是否为空
   * str返回的值为"" 代表输入框里面有值 成功
   * str返回！="" 代表里面有空格 回车 失败
   * */
  function checkVal(str: any) {
    const reg = /<p>(&nbsp;|&nbsp;\s+)+<\/p>|<p>(<br>)+<\/p>/g
    return str.replace(reg, '') || ''
  }
  function handleBeforeOk() {
    subForm.value.vipIntroduce = checkVal(subForm.value.vipIntroduce)
    userForm.value?.validate().then((error: any) => {
      if (!error) {
        if (!subForm.value.id) {
          http
            .post({
              url: speedAdd,
              data: () => {
                return {
                  ...subForm.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                visible.value = false
                subForm.value.id = null
                userForm.value?.resetFields()
                doRefresh()
              } else {
                Message.error(res.msg)
              }
            })
        } else {
          http
            .post({
              url: speedUpdate,
              data: () => {
                return {
                  ...subForm.value,
                }
              },
            })
            .then((res) => {
              btnLoading.value = false
              if (res.code == 0) {
                Message.success(res.msg)
                visible.value = false
                subForm.value.id = null
                userForm.value?.resetFields()
                doRefresh()
              } else {
                Message.error(res.msg)
              }
            })
        }
      } else {
        if (error.vipIntroduce) {
          Message.error(error.vipIntroduce.message)
        }
      }
    })
  }
  // function changeState(item: any) {
  //   console.log(item)
  //   http
  //     .get({
  //       url: setRecharge,
  //       data: () => {
  //         return {
  //           close: item.close,
  //           id: item.id,
  //         }
  //       },
  //     })
  //     .then((res) => {
  //       if (res.code == 0) {
  //         Message.success(res.msg)
  //         doRefresh()
  //       } else {
  //         Message.error(res.msg)
  //       }
  //     })
  // }
  function doRefresh(value?: number) {
    // eslint-disable-next-line prettier/prettier
    tableLoading.value = true
    form[type.value] = typeText.value
    if (value) {
      // pagination.page = value
    }
    http
      .get({
        url: speedList,
        data: () => {
          return {
            ...form,
            // page: pagination.page,
            // size: pagination.pageSize,
          }
        },
      })
      .then((res) => {
        tableLoading.value = false
        table.handleSuccess(res.data)
        // pagination.setTotalSize((res.data as any).totalSize)
      })
      .catch(console.log)
  }

  const onUpdateBorder = (isBordered: boolean) => {
    tables.bordered = isBordered
  }
  function onUpdateStriped(isStriped: boolean) {
    tables.striped = isStriped
  }
  function rowClassNameFun(_record: any, index: number) {
    return index % 2 === 1 && table.striped.value ? 'table-striped' : null
  }
  //跟踪API开始时间限制结束时间
  function changeTraceEnd(time: any) {
    return time.getTime() > new Date(form.endTime).getTime() //大于结束时间的不选
  }
  //跟踪API结束时间限制开始时间
  function changeTraceStart(time: any) {
    return time.getTime() < new Date(form.addTime).getTime() //小于开始时间的不选
  }
  onMounted(async () => {
    doRefresh()
  })
</script>

<style lang="less" scoped>
  :deep(.arco-radio) {
    margin-right: 5px;
  }
  :deep(.arco-input-append) {
    border-left: 0;
    padding-left: 5px;
  }
  :deep(.arco-table-td-content button) {
    padding: 0px !important;
    margin-right: 8px;
    background: none !important;
  }
  .top {
    margin-bottom: 20px;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 30px;
      margin: 5px 10px;

      .line {
        width: 5px;
        height: 25px;
        margin-right: 10px;
        background-color: #40a1ff;
      }

      .text {
        font-size: 16px;
        line-height: 25px;
        text-align: center;
      }
    }

    .flex {
      display: flex;
      justify-content: space-around;
      margin: 12px 7px;
      .dataBox:last-child {
        margin-right: 0px !important;
      }
      .dataBox {
        display: flex;
        align-items: center;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin-right: 20px;
        height: 150px;
        background-image: linear-gradient(rgb(var(--arcoblue-1)), #fff);
        border: 1px solid #f2f3f5;
        border-radius: 10px;

        .img {
          width: 70px;
          height: 70px;
          margin-right: 20px;
          border-radius: 50%;
        }

        .name {
          margin-top: 0;
        }

        .number {
          font-size: 22px;
        }
      }
    }
  }
  .avatar-container {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    vertical-align: middle;
    .avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .avatar-vip {
      border: 2px solid #cece1e;
    }
    .vip {
      position: absolute;
      top: 0;
      right: -9px;
      width: 15px;
      transform: rotate(60deg);
    }
  }
  .gender-container {
    .gender-icon {
      width: 20px;
    }
  }
  .custom-checkbox-card {
    padding: 5px 16px;
    border-radius: 4px;
    width: auto;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: var(--color-fill-2);
  }

  .custom-checkbox-card-mask {
    height: 14px;
    width: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--color-border-2);
    box-sizing: border-box;
  }

  .custom-checkbox-card-mask-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
  }

  .custom-checkbox-card-title {
    color: var(--color-text-1);
    font-size: 14px;
  }

  .custom-checkbox-card:hover,
  .custom-checkbox-card-checked,
  .custom-checkbox-card:hover .custom-checkbox-card-mask,
  .custom-checkbox-card-checked .custom-checkbox-card-mask {
    border-color: rgb(var(--primary-6));
  }

  .custom-checkbox-card:hover .custom-checkbox-card-title,
  .custom-checkbox-card-checked .custom-checkbox-card-title {
    color: rgb(var(--primary-6));
  }

  .custom-checkbox-card-checked .custom-checkbox-card-mask-dot {
    background-color: rgb(var(--primary-6));
  }
</style>
<style scoped>
  .ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
  }
</style>
